<template>
  <div class="opinion-summary">
    <div class="summary-main jryj">
      <p>352</p>
      <p>今日预警舆情量</p>
    </div>
    <div class="summary-main qwyq">
      <p>1,421,233</p>
      <p>今日全网舆情量</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

defineComponent({ name: 'OpinionSummary' });
</script>

<style scoped lang="scss">
.opinion-summary {
  @apply w-[520px] h-[98px] mx-auto flex justify-between;

  .summary-main {
    @apply w-[258px] h-full pl-[108px] flex flex-col justify-center;

    p:first-child {
      @apply mb-[4px] font-black text-[30px] leading-[30px] font-bold;
      font-family: D-DIN-PRO;
      background: linear-gradient(0deg, #ffdd81 49.2431640625%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p:last-child {
      @apply text-[18px];
      font-family: Alibaba PuHuiTi;
    }
  }

  .jryj {
    background: url('./assets/jryj.png') no-repeat center;
  }

  .qwyq {
    background: url('./assets/qwyq.png') no-repeat center;
  }
}
</style>
